<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝猫 - 现代购物体验</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#007AFF', // 大疆蓝
                        secondary: '#00C2FF',
                        dark: '#111827',
                        'dark-light': '#1F2937',
                        'gray-custom': '#6B7280'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all hover:shadow-md;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-4 py-2 rounded-md hover:bg-secondary/90 transition-all hover:shadow-md;
            }
            .category-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .slide-in {
                animation: slideIn 0.6s ease-out forwards;
            }
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-white text-dark font-sans">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-20">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <span class="logo text-2xl font-bold text-blue-600">蓝猫</span>
                </a>
                <nav class="hidden md:flex items-center space-x-8">
                    <ul class="flex items-center space-x-4">
                        <li><a href="index.html" class="text-gray-700 hover:text-blue-600 transition-colors">Home</a></li>
                        <li><a href="login.html" class="text-gray-700 hover:text-blue-600 transition-colors font-medium">Login</a></li>
                        <li><a href="register.html" class="text-gray-700 hover:text-blue-600 transition-colors">Register</a></li>
                    </ul>
                </nav>
                <!-- 移动端菜单按钮 -->
                <button id="mobileMenuBtn" class="md:hidden p-2 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>        
            </div>
        </div>
    </header>
    <!-- 主内容区 -->
    <main class="pt-16 bg-gray-50">
        <div class="relative container mx-auto px-4 py-8 md:py-12">
            <!-- 卡片容器 - 增加层次感 -->
            <div class="form-container bg-white rounded-xl shadow-xl p-6 sm:p-8 max-w-md mx-auto transform transition-all hover:shadow-2xl">
                <!-- 标题区域 -->
                <div class="mb-8 text-center">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-2">创建新账户</h2>
                </div>
                
                <form id="register-form">
                    <!-- 用户名输入 -->
                    <div class="form-group mb-5">
                        <label for="username" class="block text-gray-700 mb-2 text-sm font-medium">用户名</label>
                        <input type="text" id="username" name="username" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                    </div>
                    
                    <!-- 邮箱输入 -->
                    <div class="form-group mb-5">
                        <label for="email" class="block text-gray-700 mb-2 text-sm font-medium">电子邮箱</label>
                        <input type="email" id="email" name="email" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                    </div>
                    
                    <!-- 密码输入 -->
                    <div class="form-group mb-6">
                        <label for="password" class="block text-gray-700 mb-2 text-sm font-medium">设置密码</label>
                        <input type="password" id="password" name="password" required minlength="6"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                        <p class="mt-1 text-xs text-gray-500">密码长度至少6位字符</p>
                    </div>
                    
                    <!-- 注册按钮 -->
                    <button type="submit" class="btn btn-primary w-full bg-primary text-white py-3 px-4 rounded-lg font-medium hover:bg-primary/90 transition-all shadow-md hover:shadow-lg hover:shadow-primary/20">
                        注册账户
                    </button>
                </form>
                
                <!-- 登录引导 -->
                <p class="mt-6 text-center text-gray-600 text-sm">
                    已有账户？ <a href="login.html" class="text-primary font-medium hover:underline transition-colors">立即登录</a>
                </p>
            </div>
        </div>
    </main>
    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black/50 opacity-0 transition-opacity duration-300 z-40 hidden"></div>

    <!-- 通知提示 -->
    <div id="toast" class="fixed bottom-6 right-6 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i class="fa fa-check-circle text-secondary mr-2"></i>
        <span id="toastMessage"></span>
    </div>

    <script src="app.js"></script>
    <script>
        document.getElementById('register-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            console.log('注册表单被提交了'); // 新增这行
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch('http://192.168.10.124:8000/users/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        email: email,
                        password: password
                    })
                });
                
                if (response.ok) {
                    alert('Registration successful! Please login.');
                    setTimeout(() => window.location.href = 'login.html', 1000);
                } else {
                    const error = await response.json();
                    // 复用提示功能显示错误
                    showToast('注册失败: ' + (error.detail || '用户名或密码错误'), 'error');
                }
            } catch (error) {
                console.error('Register error:', error);
                showToast('注册失败，请稍后重试', 'error');
            }
        });
    </script>
</body>
</html>